import '@myworkbench/css/style.css';
import FixedNav from '@comp/fixednav';
import FixedFooter from '@comp/base/fixedfooter';
import NoteHomeItem from '@comp/notehomeitem';

import {
    getTop5Items as getTop5NoteItems
} from '@dataaccess/notes';

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoggedIn: false,
            accountName: 'Albin',
            noteItems: getTop5NoteItems()
        };
    }

    render() {
        return (
            <div>
                <FixedNav className="fixed-nav"
                    isLoggedIn={this.state.isLoggedIn}
                    accountName={this.state.accountName} />
                <main>
                    {this.state.noteItems.map(n => {
                        return <NoteHomeItem
                            key={n.id}
                            title={n.title}
                            createDateTime={n.createDateTime}
                            content={n.content}
                            detailHref={"#note/" + n.id} />;
                    })}
                </main>
                <FixedFooter className="fixed-footer" />
            </div>
        );
    }
}

ReactDOM.render(
    <Home />,
    document.getElementById('root')
);